<template>
	<wsPage title="商品列表">
		<div slot="page_operate">
			<Button  @click="refresh">
                <Icon type="refresh"></Icon>
                <span>刷新</span>
            </Button>
		</div>
		<!--统计选项-->
		<Row class="tab-demo">
			<Col span="24">
				<template v-if="queryPanel.conditions.activeIndex == 0">
					<Button type="primary" @click="showquery2">待审核(
	                	<span class="ws-text-red" v-text="count2"></span>)</Button>
	                <Button @click="showquery4">审核通过(
	                	<span class="ws-text-red" v-text="count4"></span>)</Button>
				</template>
				<template v-if="queryPanel.conditions.activeIndex == 1">
					<Button @click="showquery2">待审核(
	                	<span class="ws-text-red" v-text="count2"></span>)</Button>
	                <Button type="primary" @click="showquery4">审核通过(
	                	<span class="ws-text-red" v-text="count4"></span>)</Button>
				</template>
			</Col>
		</Row>
		<wsSmPanel :page="table.page" @simple-query="conditionquery" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="商品名称">
						<Input v-model="queryPanel.model.name" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="商品编号">
						<Input v-model="queryPanel.model.goodsSn" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="商户名称">
						<Input v-model="queryPanel.model.shop" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="品牌">
						<Select v-model="queryPanel.model.brandId" filterable clearable placeholder="请输入搜索查询">
							<Option v-for="item in queryPanel.fields.brands" :value="item.id" :key="item.id">{{ item.name }}</Option>
						</Select>
					</FormItem>
					<FormItem label="折扣率">
						<Input v-model="queryPanel.model.saleRate" placeholder="请输入一个目标折扣率"></Input>
					</FormItem>
					<FormItem label="发布类型">
						<Select clearable v-model="queryPanel.model.promotionStatus" placeholder="请选择" class="ws-form-select">
							<Option value="0">上新</Option>
							<Option value="1">折扣</Option>
						</Select>
					</FormItem>
					<FormItem label="销售类型">
						<Select clearable v-model="queryPanel.model.saleType" placeholder="请选择" class="ws-form-select">
							<Option value="1">现货</Option>
							<Option value="2">预售</Option>
						</Select>
					</FormItem>
					<FormItem label="时间选择">
						<Row>
			            <input type="date" v-model="queryPanel.model.searchTime" placeholder="请选择日期" class="ws-form-select" style="height:30px;line-height:30px;color:#DDD;border-radius:5px;border:1px solid #DDD;">
			            </Row>      
			        </FormItem>
					<FormItem label="类别筛选">
						<span>一级</span>
						<Select v-model="category1" filterable clearable class="ws-form-select" >
							<Option v-for="item in queryPanel.fields.categoryList1" :value="item.id" :key="item.id">{{ item.categoryName }}&nbsp;数量{{ item.goodsNum}}</Option>
						</Select>
						<span>二级</span>
						<Select v-model="category2" filterable clearable class="ws-form-select" >
							<Option v-for="item in queryPanel.fields.categoryList2" :value="item.id" :key="item.id">{{ item.categoryName }}&nbsp;数量{{ item.goodsNum}}</Option>
						</Select>
						<span>三级</span>
						<Select v-model="category3" filterable clearable class="ws-form-select" >
							<Option v-for="item in queryPanel.fields.categoryList3" :value="item.id" :key="item.id">{{ item.categoryName }}&nbsp;数量{{ item.goodsNum}}</Option>
						</Select>
						<span>四级</span>
						<Select v-model="category4" filterable clearable class="ws-form-select" >
							<Option v-for="item in queryPanel.fields.categoryList4" :value="item.id" :key="item.id">{{ item.categoryName }}&nbsp;数量{{ item.goodsNum}}</Option>
						</Select>
					</FormItem>
				</Form>
			</div>
			<div slot="list_operate">
				<Button v-if="action == 1"  :disabled="!isTableSelected" @click="showMulitAuditModal">批量审核</Button>
				<Button v-if="action == 2"  :disabled="!isTableSelected" @click="mulitdropoffModalshow">批量下架</Button>
				<!--<Button  @click="repari">修复图片</Button>-->
				<Button v-if="action == 2"  :disabled="!isTableSelected" v-clipboard="copyData" @click="copyGoodsNum">复制编号</Button>
			</div>
			<div slot="list_data">
				<ws-table :data="table.data" style="width: 100%" @selection-change="handleSelectionChange">
					<ws-table-column align="center" type="selection" width="80" fixed="left"></ws-table-column>
					<ws-table-column align="center" label="主图" width="120" fixed="left">
						<template slot-scope="scope">
							<img :src="scope.row.primaryPicUrl" :style="positionStyle" v-if="!scope.row.editStatus"/>
							<ws-upload-cos ref="coverUpload" catelog="goods" :show-upload-list="false" :format="['jpg','jpeg','png']" :max-size="2048" :on-success="uploadCoverSuccess" :auto-upload="false" :on-file-list="uploadCoverFileList" v-if="scope.row.editStatus">
                            <div class="ws-middle" :style="positionStyle" style="border: 1px solid #ccc;cursor: pointer;">
                                <!-- <span v-if="cropper.datas.cover.base64 == ''">商品图片</span> -->
								<img :src="scope.row.primaryPicUrl" alt="" :style="positionStyle" v-if="cropper.datas.cover.base64 == ''">
                                <img :src="cropper.datas.cover.base64" :style="positionStyle" v-if="cropper.datas.cover.base64 != ''"/>
                            </div>
                        </ws-upload-cos>
						</template>
					</ws-table-column>
					<ws-table-column align="center" prop="name" label="商品名称" min-width="240">
						<template slot-scope="scope">
							<div v-if="!scope.row.editStatus">{{scope.row.name}}</div>
							<Input placeholder="请输入" v-if="scope.row.editStatus" v-model="editData.productName"></Input>
						</template>
					</ws-table-column>
					<ws-table-column align="center" prop="merchantName" label="店铺" min-width="160"></ws-table-column>
					<ws-table-column align="center" prop="brandName" label="品牌" min-width="80"></ws-table-column>
					<ws-table-column align="center" label="发布类型">
						<template slot-scope="scope">
							<Tag v-if="scope.row.promotionStatus == 0" color="blue">上新</Tag>
							<Tag v-if="scope.row.promotionStatus == 1" color="green">折扣</Tag>
						</template>
					</ws-table-column>
					<ws-table-column align="center" label="销售类型">
						<template slot-scope="scope">
							<Tag v-if="scope.row.saleType == 1" color="blue">现货</Tag>
							<Tag v-if="scope.row.saleType == 2" color="green">预售</Tag>
						</template>
					</ws-table-column>
					<ws-table-column align="center" prop="language" label="商品语言" width="160"></ws-table-column>
					<ws-table-column align="center" prop="createDate" label="发布日期" width="140"></ws-table-column>
					<ws-table-column align="center" label="价格" fixed="right">
						<template slot-scope="scope">
							<span style="color: red;" v-text="scope.row.price"></span>
						</template>
					</ws-table-column>
					<ws-table-column align="center" label="人民币价格" fixed="right">
						<template slot-scope="scope">
							<span style="color: red;" v-text="scope.row.rmbPrice"></span>
						</template>
					</ws-table-column>
					<ws-table-column align="center" prop="saleRate" label="折扣率" width="140"></ws-table-column>
					<ws-table-column align="center" width="110" label="操作" fixed="right">
						<template slot-scope="scope">
							<Button @click="openMask(scope.row)" type="text" size="small">预览</Button>
							<Button v-if="action == 1" @click="showAuditModal(scope.row)" type="text" size="small">审核</Button>
							<Button v-if="action == 2" @click="dropoffModalshow(scope.row)" type="text" size="small">下架</Button>
							<Button @click="showTranslateList(scope.row)" type="text" size="small">查看翻译</Button>
							<Button @click="showPath(scope.row)" type="text" size="small">查看路径</Button>
							<Button @click="editGoods(scope.row)" type="text" size="small" v-if="!scope.row.editStatus">修改商品</Button>
							<Button @click="confirm(scope.row)" type="text" size="small" v-if="scope.row.editStatus">确认修改</Button>
							<Button @click="cancel(scope.row)" type="text" size="small" v-if="scope.row.editStatus">取消修改</Button>
						</template>
					</ws-table-column>
				</ws-table>
			</div>
		</wsSmPanel>

<!--查看商品路径-->
		<wsModal v-model="checkModal.show" title="查看商品类目路径"  @on-cancel="checkCancel" >
			<!-- <Form ref="from" :model="auditModal.model" :rules="auditModal.validate" :label-width="100">
				<FormItem label="审核状态" prop="status" required>
					<RadioGroup v-model="auditModal.model.action">
						<Radio :label="1">通过</Radio>
						<Radio :label="2">不通过</Radio>
					</RadioGroup>
				</FormItem>
				<FormItem label="审核意见" prop="memo">
					<Input v-model="auditModal.model.memo" placeholder="请输入" type="textarea"></Input>
				</FormItem>
			</Form> -->
			<div>{{checkModal.pathName}}</div>
		</wsModal>
		
		<!--审核商品模态框-->
		<wsModal v-model="auditModal.show" ok-text="提交" title="审核商品" @on-ok="saveModal" @on-cancel="auditCancel">
			<Form ref="from" :model="auditModal.model" :rules="auditModal.validate" :label-width="100">
				<FormItem label="审核状态" prop="status" required>
					<RadioGroup v-model="auditModal.model.action">
						<Radio :label="1">通过</Radio>
						<Radio :label="2">不通过</Radio>
					</RadioGroup>
				</FormItem>
				<FormItem label="审核意见" prop="memo">
					<Input v-model="auditModal.model.memo" placeholder="请输入" type="textarea"></Input>
				</FormItem>
			</Form>
		</wsModal>

		<!--审核翻译模态框-->
		<wsModal v-model="translateModal.show" title="查看商品翻译" :width="800" hideFooter>
			<ws-table :data="translateModal.table.data" style="width: 100%">
				<ws-table-column align="center" prop="languageName" label="语言"></ws-table-column>
				<ws-table-column align="center" prop="productName" label="商品名称" min-width="160"></ws-table-column>
				<ws-table-column align="center" width="110" label="操作" fixed="right">
					<template slot-scope="scope">
						<Tag color="blue" v-if="scope.row.status == -1">原文</Tag>
						<Button @click="showEditTranslate(scope.row)" type="text" size="small" v-if="scope.row.status == 0 || scope.row.status == 1">编辑</Button>
						<Button @click="putOffTranslate(scope.row)" type="text" size="small" v-if="scope.row.status == 3">下架</Button>
						<Button @click="putOnTranslate(scope.row)" type="text" size="small" v-if="scope.row.status == 1">上架</Button>
					</template>
				</ws-table-column>
			</ws-table>
		</wsModal>
		
		<wsModal v-model="translateModal1.show" title="编辑商品翻译" :width="800" @on-ok="saveTranslateModal1" @on-cancel="cancelTranslateModal1">
			<Form ref="translateModal1.model" :model="translateModal1.model" :rules="translateModal1.validate" :label-width="100">
				<FormItem label="商品语言" required>
					<span v-if="edit.row" v-text="edit.row.language"></span>
					<div style="float: right;">
						<Select placeholder="请选择翻译服务" v-model="translateModal1.serviceType" class="ws-form-select translate-service">
							<Option :value="item.wKey" v-for="item in translateModal1.fields.translateServices">{{item.wValue}}</Option>
						</Select>
						<ButtonGroup>
							<Button @click="loadLocalGoods">加载原文</Button>
							<Button @click="translateGoodsName">翻译名称</Button>
							<Button @click="translateGoodsDesc">翻译详情</Button>
						</ButtonGroup>
					</div>
				</FormItem>
				<FormItem label="翻译语言" prop="languageCode" required>
					<span v-text="translateModal1.model.languageName"></span>
				</FormItem>
				<FormItem label="商品名称" prop="name">
					<Input v-model="translateModal1.model.name"></Input>
					<div class="translate-desc" v-html="translateModal1.model.wDesc"></div>
				</FormItem>
				<FormItem label="商品描述" required>
					<wsEditor :defaultMsg="translateModal1.model.wDesc" :config="translateModal1.editor.config" defaultStyle="height: 500px" ref="ue"></wsEditor>
				</FormItem>
			</Form>
		</wsModal>

		<!-- preview start -->
		<div id="preview-mask">
			<div class="x-layer">
				<div class="inner-box">
					<div class="close-btn" @click="closeMask">
						<Icon type="ios-close" size="28"></Icon>
					</div>
					<!-- A start -->
					<div class="layer-content" id="productDetail" style="overflow: hidden;">
					</div>
				</div>
			</div>
		</div>
		<!-- preview end -->
		<ws-cropper v-model="cropper.show" :img="cropper.imgData" :config="cropper.config" @crop-ok="cropOk"></ws-cropper>
		<!-- <Button type="success" @click="confirm" size="large"  style="position:absolute;left:50%;bottom:25px;">确认</Button>  -->
	</wsPage>
</template>
<script>
import FileUtil from '../../../common/file.js';
	import Util from "../../../common/util.js";
	import $ from "jquery";
	import Translate from '@/common/translate.js';
	import { Base64 } from 'js-base64';

	export default {
		data() {
			return {
				category1:'',
				category2:'',
				category3:'',
				category4:'',
				action: 1, //1.待审核 2.审核通过
				count2: '',
				count4: '',
				queryPanel: {
					conditions: {
						activeIndex: 0,
						s0: 0,
						s1: 0
					},
					fields: {
						brands: [],
						categoryList1: [],
						categoryList2: [],
						categoryList3: [],
						categoryList4: []
					},
					model: {
						name: '',
						status: '2',
						promotionStatus: '',
						saleType: '',
						shop: '',
						brandId: '',
						saleRate: '',
						searchTime: '',
						categoryId:0,
					}
				},
				table: {
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					},
					selection: [] //选中
				},
				//审核模态框
				auditModal: {
					show: false,
					isMulit: false, //是否为批量审核
					model: {
						action: 1,
						memo: ''
					},
					validate: {
						memo: [{
							required: true,
							message: '审核意见不能为空',
							trigger: 'blur'
						}],
					}
				},
				edit: {
					row: null
				},
				translateModal: { //翻译列表
					show: false,
					table: {
						data: []
					}
				},
				translateModal1: { //商品翻译模态框
					show: false,
					serviceType: '', //翻译服务
					model: {
						productId: '',
						tenantId: '',
						languageCode: '',
						name: '',
						wDesc: ''
					},
					validate: {
						languageCode: [{
							required: true,
							message: '语言类型必选'
						}],
						name: [{
							required: true,
							message: '商品名称必须输入',
							trigger: 'blur'
						}]
					},
					fields: {
						languages: [], //可翻译的语言列表
						languageMap: {}, //所有语言列表
						translateServices: [], //翻译服务列表
						translateSupportMap: {} //翻译服务支持语言
					},
					//文本编辑器
					editor: {
						message: '',
						config: {
							initialFrameWidth: null,
							initialFrameHeight: 350,
							zIndex: 1001
						},
						whetherInit: false //是否初始化
					},
					edit: {
						row: null
					}
				},
				checkModal: {
					show : false, //是否显示
					pathName: ''
				},
				cropper: {
                show: false,
                datas: {
                    top: {
                        base64: ''
                    },
                    cover: {
                        base64: ''
                    }
                },
                config: {
                    fixedNumber: [3, 4],
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 60,
                    autoCropHeight: 80,
				},
				
			},
			editData:{
					productId :0,
					productImgUrl:"",
					productName:""
				}
			};
		},
		computed: {
			 /**
         * 计算样式
         */
        positionStyle() {
            return 'width:' + this.cropper.config.autoCropWidth + 'px;height:' + this.cropper.config.autoCropHeight + 'px;'
        },
			/**
			 * 表格行是否为选中状态
			 */
			isTableSelected() {
				return this.table.selection.length > 0;
			},
			isEdit() {
				return !Util.vad.isBlank(this.propertyModal.form.id);
			},
			/**
			 * 复制内容
			 */
			copyData() {
				let selections = this.table.selection;
				let result = '';
				for(let i = 0; i < selections.length; i++) {
					let item = selections[i];
					let key = item.id + "-" + item.tenantId;
					let str = Base64.encode(key);
					if(0 != i) {
						result += ',';
					}
					result += str;
				}
				return result;
			}
		},
		watch:{
			'category1':function(newVal,oldVal){
				var that = this;
				console.log(newVal);
				that.queryPanel.fields.categoryList3 = [];
				that.queryPanel.fields.categoryList4 = [];
				console.log(that.queryPanel.fields.categoryList3 )
				if(newVal == undefined) {
					that.queryPanel.model.categoryId = 0;  
				}else{
					this.axios.get('/ws/ops/v2/category/tree/' + newVal + '/' + that.queryPanel.model.status,{
					headers:{
						'content-type' : 'application/json'
					}
				}).then(result =>{
					console.log(result.data.data)
					// console.log(that.queryPanel);
					
					if(result.data){
						if(result.data.data.length > 0){
							that.queryPanel.fields.categoryList2 = result.data.data;
						}else{
							that.$forceUpdate(); 
							that.queryPanel.fields.categoryList2 = [];
							that.queryPanel.model.categoryId = newVal;
						}
					}
					
				});
				}
				// console.log(newVal,oldVal)
				
			},
			'category2':function(newVal,oldVal){
				var that = this;
				that.queryPanel.fields.categoryList4 = [];
				if(newVal == undefined) {
					that.queryPanel.model.categoryId = 0;
					
					return;
				}
				// console.log(newVal,oldVal)
				this.axios.get('/ws/ops/v2/category/tree/' + newVal + '/' + that.queryPanel.model.status,{
					headers:{
						'content-type' : 'application/json'
					}
				}).then(result =>{
					console.log(result.data.data)
					// console.log(that.queryPanel);
					
					if(result.data){
						if(result.data.data.length > 0){
							that.queryPanel.fields.categoryList3 = result.data.data;
						}else{
							that.$forceUpdate();
							that.queryPanel.fields.categoryList3 = [];
							that.queryPanel.model.categoryId = newVal;
						}
					}
					
				});
			},
			'category3':function(newVal,oldVal){
				var that = this;
				if(newVal == undefined) {that.queryPanel.model.categoryId = 0; return;}
				this.axios.get('/ws/ops/v2/category/tree/' + newVal + '/' + that.queryPanel.model.status,{
					headers:{
						'content-type' : 'application/json'
					}
				}).then(result =>{
					console.log(result.data.data)
					// console.log(that.queryPanel);
					
					if(result.data){
						if(result.data.data.length > 0){
							that.queryPanel.fields.categoryList4 = result.data.data;
						}else{
							that.$forceUpdate();
							that.queryPanel.fields.categoryList4 = [];
							that.queryPanel.model.categoryId = newVal;
						}
					}
					
				});
			},
			'category4':function(newVal,oldVal){
				if(newVal != undefined){
					this.queryPanel.model.categoryId = newVal;
				}else{
					this.queryPanel.model.categoryId = 0;
				}
				
			}
		},
		mounted() {
			this.init();
			this.initBrands();
			this.initTranslateServices();
			this.initTranslateSupports();
		},
		methods: {
			//监听选择的类别
			selectCategory(index){
				console.log(index);
			},
			//取消修改
			cancel(row){
				
				this.editData ={
					productId :0,
					productImgUrl:"",
					productName:""
				};
				this.cropper = {
                show: false,
                datas: {
                    top: {
                        base64: ''
                    },
                    cover: {
                        base64: ''
                    }
                },
                config: {
                    fixedNumber: [3, 4],
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 60,
                    autoCropHeight: 80,
				},
				
			};
				if(row) row.editStatus = !row.editStatus;
			},
            /**
                提交验证数据
             */
            confirm(row){
                var _this=this;
                let imgUrl=_this.cropper.datas.cover.base64;
                let name=_this.editData.productName;
                // let orderNum=_this.addBannerData.orderNum;
                // let type=_this.addBannerData.type;
                // let languageCode=_this.addBannerData.languageCode;
                // let selectionList=_this.addBannerData.selectionList;
                // if(Util.vad.isBlank(imgUrl)){
                //     this.$Message.info('请上传图片');
				// 	return;
                // } 
                if(Util.vad.isBlank(name)){
                    this.$Message.info('请输入商店名称');
					return;
                }
                this.contentDataConfirm(row);
            },
			/**
             * 内容验证不能为空
             */
            contentDataConfirm(row){               
                var _this=this;
                _this.saveCoverImg(row);
               
            },
			 /**
			 * 封面图上传成功
			 */
			uploadCoverSuccess(response, file, fileList) {
				let _this = this;
				// var imgurl = '';
				// console.log(response.data.Location);
				var params = {
					productId : this.editData.productId,
					productImgUrl : this.editData.productImgUrl,
					productName : this.editData.productName
				}
				// console.log(params);
				// debugger
				if(0 == response.meta.code) {
					params.productImgUrl = response.data.Location;
				this.axios.put('ws/ops/v2/product/sku',params).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						this.$Message.info('修改成功!');
						this.query();
						this.cancel();
					} else {
						this.$Message.warning('修改失败');
					}
				})
					// imgurl = response.data.Location;   
					// this.editData.productImgUrl = imgurl;
					// console.log(this.editData.productImgUrl) 
					// console.log(response.data.Location);
					// if(_this.addBannerData.type!=4){
                    //     var postData = {
                    //         'imgUrl':_this.form.upload.imgData,
                    //         'name':_this.queryPanel.goods.name,                
                    //         'languageCode':_this.addBannerData.languageCode,
                    //         'type':_this.addBannerData.type,
                    //         'linkId':_this.addBannerData.selectionList.id
                    //     };
                    // }else {
                    //     var postData = {
                    //         'imgUrl':_this.form.upload.imgData,
                    //         'name':_this.queryPanel.goods.name,                
                    //         'languageCode':_this.addBannerData.languageCode,
                    //         'type':_this.addBannerData.type,
                    //         'linkId':_this.addBannerData.selectionList.productId
                    //     };
                    // }
                    
				}
            },
			/**
			 * 截图OK
			 */
			cropOk(data) {
				let action = data.action;
                let imgBase64Data = data.data;               
				this.cropper.datas.cover.base64 = imgBase64Data;
                this.cropper.imgData = data;
            },
			/**
			 * 添加顶部图片
			 */
			addTopImg(result) {
				this.cropper.imgData = result;
				this.cropper.show = true;
			},
			 /**
			 * 保存封面图
			 */
			saveCoverImg(row) {
				if(this.cropper.datas.cover.base64 != ''){
					let data = this.cropper.datas.cover.base64;
					let fileName = "topic_" + new Date().getTime() + '.jpg';
					let newFile = FileUtil.dataURLtoFile(data, fileName);
					// console.log(this.$refs.coverUpload.execUpload);
					this.$refs.coverUpload.execUpload([newFile]);
					// this.editData.productImgUrl = fileName;
				}
				
				if(row.primaryPicUrl == this.editData.productImgUrl){
					var params = {
					productId : this.editData.productId,
					productImgUrl : this.editData.productImgUrl,
					productName : this.editData.productName
				}
				
				this.axios.put('ws/ops/v2/product/sku',params).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						this.$Message.info('修改成功!');
						this.query();
						this.cancel();
					} else {
						this.$Message.warning('修改失败');
					}
				})
				}
				
			},	
			  /**
			 * 封面图片
			 */
			uploadCoverFileList(fileList) {
				let _this = this;
				let newFile = fileList[0];
				FileUtil.readFile(newFile, function(result, currFile) {
					_this.addTopImg(result);
				});
            },
			//刷新
			refresh() {
				this.queryPanel.model.name = '';
				this.queryPanel.model.promotionStatus = '';
				this.queryPanel.model.saleType = '';
				this.queryPanel.model.shop = '';
				this.queryPanel.model.brandId = '';
				this.queryPanel.model.saleRate = '';
				this.queryPanel.model.goodsSn = '';
				this.table.data = [];
				this.table.page.total = 0; //总条数
				this.table.page.pageNum = 1; //当前页
				this.table.page.pageSize = 10; //每页显示条数
				this.table.selection = []; //选中
				this.init();
			},
			init() {
				this.query();
				this.count();
				this.initTranslateLanguage();
				// this.getGoodsCategory();
			},
			/*
			** 获取商品类别
			*/
			getGoodsCategory(){
				var that = this;
				this.axios.get('/ws/ops/v2/category/tree/-1/'+ that.queryPanel.model.status ,{
					headers:{
						'content-type' : 'application/json'
					}
				}).then(result =>{
					console.log(result.data.data)
					// console.log(that.queryPanel);
					
					if(result.data){
						if(result.data.data){
							that.queryPanel.fields.categoryList1 = result.data.data;
						}else{
							that.queryPanel.fields.categoryList1 = [];
						}
					}
					
				});
			},
			/**
			 * 初始化品牌列表
			 */
			initBrands() {
				const _this = this;
				this.axios.get('/ws/ops/brands').then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.queryPanel.fields.brands = res.data;
					} else {
						_this.$Message.warning('初始品牌失败:' + resMeta.message);
					}
				});
			},
			/**
			 * 查询翻译服务
			 */
			initTranslateServices() {
				const _this = this;
				this.axios.get('/ws/transalte/services').then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.translateModal1.fields.translateServices = res.data;
					} else {
						_this.$Message.warning('初始翻译服务失败:' + resMeta.message);
					}
				});
			},
			/**
			 * 查询翻译支付服务
			 */
			initTranslateSupports() {
				const _this = this;
				this.axios.get('/ws/transalte/supports').then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.translateModal1.fields.translateSupportMap = res.data;
					} else {
						_this.$Message.warning('初始翻译支持语言失败:' + resMeta.message);
					}
				});
			},
			/**
			 *显示批量下架提示框 
			 */
			mulitdropoffModalshow() {
				const _this = this;
				this.$confirm({
					title: "操作提示",
					width: 300,
					content: "你确认下架选中的商品记录吗?",
					onOk: function() {
						_this.mulitdropoff();
					}
				});
			},
			/**
			 * 构建审核对象
			 */
			buildAuditData() {
				let auditData = [];
				let _this = this;
				let action_ = this.auditModal.model.action;
				let memo_ = this.auditModal.model.memo;
				if(this.auditModal.isMulit) {
					//批量审核
					let selections = this.table.selection;
					for(let i = 0; i < selections.length; i++) {
						let row_ = selections[i];
						auditData.push({
							productId: row_.id,
							tenantId: row_.tenantId,
							action: action_,
							memo: memo_
						});
					}
				} else {
					let currRow = this.edit.row;
					auditData.push({
						productId: currRow.id,
						tenantId: currRow.tenantId,
						action: action_,
						memo: memo_
					});
				}
				return auditData;
			},
			/**
			 * 构建下架对象
			 */
			builddropoffData() {
				let dropoffData = [];
				let _this = this;
				let status_ = '3';
				//批量审核
				let selections = this.table.selection;
				for(let i = 0; i < selections.length; i++) {
					let row_ = selections[i];
					dropoffData.push({
						id: row_.id,
						tenantId: row_.tenantId,
						status: status_
					});
				}
				return dropoffData;
			},
			/**
			 * 查看商品路径
			 */
			showPath(row){
				let _this  = this;
				const _row = row;
				if(row == 'close'){
					_this.checkModal.show = false;
					_this.checkModal.pathName = '';
					return;
				}else{
this.axios.get("/ws/ops/v2/product/publishtree/" + _row.id).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					_this.checkModal.show = !_this.checkModal.show;
					if(0 == resMeta.code){
						
						_this.checkModal.pathName = res.data;
					}else{
						_this.checkModal.pathName = '接口获取数据失败';
					}
				});
				}
				
				console.log(_row)
				
				
			},
			/**
			 * 关闭审核商品
			 */
			checkCancel(){
				this.checkModal = {
					show: false,
					pathName : ''
				};
			},
			/**
			 * 审核通过
			 */
			auditOk() {
				const _this = this;
				let postData_ = this.buildAuditData();
				this.axios
					.put("/ws/ops/v2/product/audit", postData_)
					.then(response => {
						var res = response.data;
						var resMeta = res.meta;
						if(0 == resMeta.code) {
							_this.auditCancel();
							_this.init();
						} else {
							_this.$Message.warning(resMeta.message);
						}
					});
			},
			/**
			 * 修复图片
			 */
			repari() {
				this.axios
					.get("/ws/v2/ms/products/repairs")
					.then(response => {

					});
			},
			/**
			 * 批量下架商品
			 */
			mulitdropoff() {
				const _this = this;
				let postData_ = this.builddropoffData();
				this.axios
					.put("/ws/ops/v2/products/dropoff", postData_)
					.then(response => {
						var res = response.data;
						var resMeta = res.meta;
						if(0 == resMeta.code) {
							_this.init();
						} else {
							_this.$Message.warning(resMeta.message);
						}
					});
			},
			/**
			 *显示下架提示框 
			 */
			dropoffModalshow(row) {
				const _this = this;
				this.$confirm({
					title: "操作提示",
					width: 300,
					content: "你确认下架选中的商品记录吗?",
					onOk: function() {
						_this.dropoff(row);
					}
				});
			},
			/**
			 * 下架商品
			 */
			dropoff(row_) {
				const _this = this;
				let id = row_.id;
				let tenantId = row_.tenantId;
				let status = "3";
				this.axios.put('/ws/ops/v2/product/dropoff/' + status + "/" + id).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('商品下架成功');
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('商品下架失败:' + message_);
					}
				});
			},
			count() {
				const _this = this;
				this.axios.get('/ws/ops/v2/product/count').then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.count2 = response.data.data.count2;
						_this.count4 = response.data.data.count4;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 显示待审核
			 */
			showquery2() {
				this.queryPanel.conditions.activeIndex = 0;
				this.action = 1;
				this.queryPanel.model.status = 2;
				this.table.page.pageNum = 1;
				this.query();
			},
			/**
			 * 显示审核通过的
			 */
			showquery4() {
				this.queryPanel.conditions.activeIndex = 1;
				this.action = 2;
				this.queryPanel.model.status = 4;
				this.table.page.pageNum = 1;
				this.query();
			},
			/**
			 * 条件查询
			 */
			conditionquery() {
				this.table.page.pageNum = '1';
				this.query();
			},
			/**
			 * 表单查询
			 */
			query() {
				this.getGoodsCategory();
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				console.log(pageSize + '--------------'+ pageNum);
				const _this = this;
				console.log(_this.queryPanel.model);
				this.axios
					.get("/ws/ops/v2/product/" + pageSize + "/" + pageNum, {
						params: _this.queryPanel.model
					})
					.then(response => {
						var res = response.data;
						var resMeta = res.meta;
						res.data.list.forEach(function(v){
							v.editStatus = false;
						});
						if(0 == resMeta.code) {
							_this.buildPageData(res.data);
						} else {
							_this.$Message.warning(resMeta.message);
						}
					});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
				console.log(data_.total)
				console.log(this.table.page)
			},
			/**
			 * 表格选择变更事件
			 */
			tableSelected(selection_) {
				this.table.selection = selection_;
			},

			/*预览页面居中*/
			resize() {
				var winHeight = $(window).height();
				if(winHeight < 790) {
					$(".x-layer").css({
						display: "block"
					});
					$(".inner-box").css({
						margin: "50px auto"
					});
				} else {
					$(".x-layer").css({
						display: "flex"
					});
					$(".inner-box").css({
						margin: "auto"
					});
				}
			},
			controlMask(flag, productId) {
				var _this = this;
				if(flag) {
					let html = '<iframe src="https://api.beautystudio.com.cn/h5/#/goods/preview/' + productId + '?language=zh&currency=CNY" width="355px" height="767px"></iframe>';
					$("#preview-mask .x-layer .layer-content").html(html);
					$("#preview-mask").show();
					$("html").css("fontSize", "26.88px");
					_this.resize();
					$(window).resize(function(event) {
						_this.resize();
					});
				} else {
					$("#preview-mask").hide();
					$("html").css("fontSize", "auto");
				}
			},
			openMask(obj) {
				let productId = obj.id;
				this.controlMask(true, productId);
			},
			closeMask() {
				this.controlMask(false);
			},
			/**
			 * 新增弹框确认操作
			 */
			saveModal() {
				// debugger;
				this.$refs['from'].validate((valid) => {
					if(valid) {
						this.auditOk();
						this.auditModal.show = false;
					}
				});
			},
			/**
			 * 审核取消
			 */
			auditCancel() {
				//this.$refs['from'].resetFields();
				this.auditModal.show = false;
				this.auditModal.model.action = 1;
				this.auditModal.model.memo = '';
			},
			/**
			 *显示审核模态框 
			 */
			showAuditModal(row) {
				this.edit.row = row;
				this.auditModal.isMulit = false;
				this.auditModal.show = true;
			},
			/**
			 * 显示批量审核
			 */
			showMulitAuditModal() {
				this.auditModal.isMulit = true;
				this.auditModal.show = true;
			},
			/**
			 * 
			 */
			handleSelectionChange(val) {
				this.table.selection = val;
			},
			/**
			 * 初始化可以翻译语言
			 */
			initTranslateLanguage() {
				const _this = this;
				this.axios
					.get("/ws/ops/v2/languages").then(response => {
						var res = response.data;
						var resMeta = res.meta;
						if(0 == resMeta.code) {
							let langauges_ = res.data;
							_this.translateModal1.fields.languages = [];
							_this.translateModal1.fields.languageMap = [];
							for(let i = 0 ; i < langauges_.length; i++) {
								let langauge_ = langauges_[i];
								_this.translateModal1.fields.languageMap[langauge_.code] = langauge_;
								if(1 == langauge_.translatable) {
									_this.translateModal1.fields.languages.push(langauge_);
								}
							}
						} else {
							_this.$Message.warning(resMeta.message);
						}
					});
			},
			/**
			 * 复制商品编号
			 */
			copyGoodsNum() {
				this.$Message.info('复制商品编号成功');
			},
			/**
			 * 加载商品信息
			 */
			loadLocalGoods() {
				let current = this.edit.row;
				const _this = this;
				let productId = current.id;
				let tenantId = current.tenantId;
				this.axios
					.get("/ws/ops/v2/product/default/" + productId + "/" + tenantId).then(response => {
						var res = response.data;
						var resMeta = res.meta;
						if(0 == resMeta.code) {
							_this.buildTranslateData(res.data);
						} else {
							_this.$Message.warning(resMeta.message);
						}
					});
			},
			/**
			 * 构建翻译数据
			 */
			buildTranslateData(data) {
				this.translateModal1.model.name = data.name;
				this.translateModal1.model.wDesc = data.wDesc;
				this.$refs.ue.setUEContent(data.wDesc);
			},
			/**
			 * 构建翻译服务
			 */
			buildTranslateService(obj_) {
				let translateMap = {
					baidu: obj_.baiduKey,
					bing: obj_.bingKey,
					google: obj_.googleKey,
					youdao: obj_.youdaoKey
				};
				return translateMap;
			},
			/**
			 * 计算翻译服务
			 * [源,目标]
			 */
			computeTranslateService(serviceType) {
				//source
				let current_ = this.edit.row;
				let currentLanguageCode_ = current_.languageCode;
				let supportMap = this.translateModal1.fields.translateSupportMap[serviceType];
				//target
				let translateRow = this.translateModal1.edit.row;
				
				return [supportMap[currentLanguageCode_], supportMap[translateRow.languageCode]];
			},
			/**
			 * 翻译商品名称
			 */
			translateGoodsName() {
				let translateService_ = this.translateModal1.serviceType;
				if(Util.vad.isBlank(translateService_)) {
					this.$Message.info('选择翻译服务');
					return;
				}
				
				let goodsName = this.translateModal1.model.name;
				if(Util.vad.isBlank(goodsName)) {
					return;
				}
				
				
				let translateKeys = this.computeTranslateService(translateService_);
				console.log(translateKeys);
				let from = translateKeys[0];
				let to = translateKeys[1];
				if(Util.vad.isBlank(from) || Util.vad.isBlank(to)) {
					this.$Message.info('翻译服务不支持');
					return;
				}
				
				let _this = this;
				from = 'auto';
				Translate(translateService_, goodsName, from, to, function(result) {
					_this.translateModal1.model.name = result;
				});
			},
			/**
			 * 翻译商品详情
			 */
			translateGoodsDesc() {
				let translateService_ = this.translateModal1.serviceType;
				if(Util.vad.isBlank(translateService_)) {
					this.$Message.info('选择翻译服务');
					return;
				}
				
				let wDesc = this.$refs.ue.getUEContent();
				if(Util.vad.isBlank(wDesc)) {
					return;
				}
				
				let translateKeys = this.computeTranslateService(translateService_);
				console.log(translateKeys);
				let from = translateKeys[0];
				let to = translateKeys[1];
				if(Util.vad.isBlank(from) || Util.vad.isBlank(to)) {
					this.$Message.info('翻译服务不支持');
					return;
				}
				
				let _thisVue = this;
				this.translateModal1.model.wDesc = wDesc;
				let plength = $('.translate-desc p').length;
				let loopIndex = 0;
				from = 'auto';
				$('.translate-desc p').each(function(item, index) {
					let _this = $(this);
					let text = _this.text();
					if(Util.vad.isBlank(text)) {
						loopIndex++;
						_thisVue.translateRestData(plength, loopIndex);
						return;
					}
					Translate(translateService_, text, from, to, function(result) {
						_this.text(result);
						loopIndex++;
						_thisVue.translateRestData(plength, loopIndex);
					});
				});
			},
			/**
			 * 设置翻译结果
			 */
			translateRestData(plength, loopIndex) {
				if(loopIndex == plength) {
					//结束
					let html = $('.translate-desc').html();
					this.$refs.ue.setUEContent(html);
				}
			},
			/**
			 * 显示翻译列表
			 */
			showTranslateList(row_) {
				this.edit.row = row_;
				this.buildGoodsTranslateList();
			},
			/**
			 * 构建商品翻译列表
			 */
			buildGoodsTranslateList() {
				let row_ = this.edit.row;
				let _this = this;
				this.initGoodsTranslateList(function(translateDatas) {
					let translateDataMap = {};
					for(let i = 0; i < translateDatas.length; i++){
						let translateData = translateDatas[i];
						translateDataMap[translateData.languageCode] = translateData;
					}
					//添加自己
					row_.status = -1; //代表原文
					translateDataMap[row_.languageCode] = row_;
					
					let languages = _this.translateModal1.fields.languages;
					//1.查询商品已经存在的翻译列表
					_this.translateModal.table.data = [];
					for(let i = 0; i < languages.length; i++) {
						let language = languages[i];
						let currGoods = translateDataMap[language.code];
						_this.translateModal.table.data.push({
							productId: row_.id,
							tenantId: row_.tenantId,
							languageCode:  language.code,
							languageName: language.motherTongue + '/' + language.english,
							productName: currGoods ? currGoods.name : '',
							status: currGoods ? currGoods.status : 0,
							wDesc: currGoods ? currGoods.wDesc : '',
							baiduKey: language.baiduKey,
							youdaoKey: language.youdaoKey,
							bingKey: language.bingKey,
							googleKey: language.googleKey
						});
					}
					
					_this.translateModal.show = true;
				});
			},
			/**
			 * 初始化商品已经存在的翻译列表
			 */
			initGoodsTranslateList(callback) {
				const _this = this;
				let row_ = this.edit.row;
				this.axios
					.get("/ws/ops/v2/product/translates/" + row_.id + '/' + row_.tenantId).then(response => {
						var res = response.data;
						var resMeta = res.meta;
						if(0 == resMeta.code) {
							callback(res.data);
						} else {
							_this.$Message.warning(resMeta.message);
						}
					});
			},
			/**
			 * 显示商品编译修改
			 */
			showEditTranslate(row_) {
				const _this = this;
				this.translateModal1.model.languageName = row_.languageName;
				this.translateModal1.model.languageCode = row_.languageCode;
				this.translateModal1.model.productId = row_.productId;
				this.translateModal1.model.tenantId = row_.tenantId;
				this.translateModal1.model.name = row_.productName;
				this.translateModal1.model.wDesc = row_.wDesc;
				
				this.translateModal1.edit.row = row_;
				this.translateModal1.show = true;
			},
			/**
			 * 保存翻译模态框
			 */
			saveTranslateModal1() {
				this.$refs['translateModal1.model'].validate((valid) => {
					if(valid) {
						this.translateModalOK();
					}
				});
			},
			/**
			 * 翻译模态框OK
			 */
			translateModalOK() {
				let content = this.$refs.ue.getUEContent();
				this.translateModal1.model.wDesc = content;
				let row = this.translateModal1.edit.row;
				if(row.status == 0) {
					//新增
					this.submitNewTranslateModal();
				} else {
					//编辑
					this.submitUpdateTranslateModal();
				}
			},
			/**
			 * 提交新增翻译
			 */
			submitNewTranslateModal() {
				let postData_ = this.translateModal1.model;
				const _this = this;
				this.axios.post('/ws/ops/v2/product/translate', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('新增商品翻译成功');
						_this.buildGoodsTranslateList();
						_this.cancelTranslateModal1();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('新增商品翻译失败:' + message_);
					}
				});
			},
			/**
			 * 提交编辑商品翻译
			 */
			submitUpdateTranslateModal() {
				let postData_ = this.translateModal1.model;
				const _this = this;
				this.axios.put('/ws/ops/v2/product/translate', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('修改商品翻译成功');
						_this.buildGoodsTranslateList();
						_this.cancelTranslateModal1();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('修改商品翻译失败:' + message_);
					}
				});
			},
			/**
			 * 取消模翻译框
			 */
			cancelTranslateModal1() {
				this.resetTranslateModal1();
				this.translateModal1.show = false;
				
			},
			/**
			 * 重置
			 */
			resetTranslateModal1() {
				this.$refs['translateModal1.model'].resetFields();
				//				this.translateModal1.model.productId = '';
				//				this.translateModal1.model.tenantId = '';
				this.translateModal1.model.languageCode = '';
				this.translateModal1.model.name = '';
				this.translateModal1.model.wDesc = '';
				this.$refs.ue.setUEContent("");
			},
			/**
			 * 上架翻译
			 */
			putOnTranslate(row_) {
				const _this = this;
				this.$confirm({
					title: "操作提示",
					width: 300,
					content: "你确认上架该条商品翻译吗?",
					onOk: function() {
						_this.putOnTranslateSubmit(row_);
					}
				});
			},
			/**
			 * 提交翻译上架
			 */
			putOnTranslateSubmit(row_) {
				let postData_ = row_;
				const _this = this;
				this.axios.put('/ws/ops/v2/product/translate/on', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('上架商品翻译成功');
						_this.buildGoodsTranslateList();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('上架商品翻译失败:' + message_);
					}
				});
			},
			/**
			 * 下架翻译
			 */
			putOffTranslate(row_) {
				const _this = this;
				this.$confirm({
					title: "操作提示",
					width: 300,
					content: "你确认下架该条商品翻译吗?",
					onOk: function() {
						_this.putOffTranslateSubmit(row_);
					}
				});
			},
			/**
			 * 提交翻译上架
			 */
			putOffTranslateSubmit(row_) {
				let postData_ = row_;
				const _this = this;
				this.axios.put('/ws/ops/v2/product/translate/off', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('下架商品翻译成功');
						_this.buildGoodsTranslateList();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('下架商品翻译失败:' + message_);
					}
				});
			},
			
			/*
			* 修改商品信息
			*/
			editGoods(row){
				let _row = row;
				
				// console.log(_row);
				if(this.editData.productId == 0){
					_row.editStatus = !_row.editStatus;
				this.editData.productId = _row.id;
				this.editData.productImgUrl = _row.primaryPicUrl;
				this.editData.productName = _row.name;
				}
				
				// console.log(_row)
			}
		}
	};
</script>

<style scoped>
	.tab-demo {
		margin-bottom: 10px;
	}
	
	.ws-form-select {
		width: 162px;
	}
	
	#preview-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
		overflow: auto;
		display: none;
	}
	
	#preview-mask .x-layer {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	#preview-mask .x-layer .inner-box {
		width: 384px;
		height: 810px;
		position: relative;
		background: url(../../../assets/images/product/iphonex.png) no-repeat;
	}
	
	#preview-mask .x-layer .inner-box .close-btn {
		position: absolute;
		top: -15px;
		right: -15px;
		font-size: 20px;
		text-align: center;
		line-height: 26px;
		width: 30px;
		height: 30px;
		color: #fff;
		border: 1px solid #fff;
		border-radius: 50%;
		cursor: pointer;
	}
	
	#preview-mask .x-layer .inner-box .layer-content {
		position: absolute;
		border-radius: 40px;
		top: 21px;
		left: 21px;
		width: 338px;
		height: 767px;
		border: 1px solid #999;
		background: #f9f9f9;
		overflow-x: auto;
	}
	
	#preview-mask .x-layer .inner-box .detail-more {
		position: absolute;
		border-radius: 40px;
		top: 21px;
		left: 21px;
		width: 338px;
		height: 767px;
		border: 1px solid #999;
		background: #f9f9f9;
	}
	.translate-language {
		width: 60%;
	}
	.translate-desc {
		display: none;
	}
</style>

<style>
	.translate-service .ivu-select-dropdown {
		z-index: 1002!important;
	}
</style>
<!-- css start -->